<template>
    <div class="mycontainer">
        <div class="mylogo">
<<<<<<< HEAD
            <!--<van-overlay show="show" @click="editInfo">-->
                <!--<div class="edit">-->
                    <!--<van-form @submit="onSubmit">-->
                        <!--<van-field-->
                                <!--v-model="username"-->
                                <!--name="用户名"-->
                                <!--label="用户名"-->
                                <!--placeholder="用户名"-->
                                <!--:rules="[{ required: true, message: '请填写用户名' }]"-->
                        <!--/>-->
                        <!--<van-field-->
                                <!--v-model="password"-->
                                <!--type="password"-->
                                <!--name="密码"-->
                                <!--label="密码"-->
                                <!--placeholder="密码"-->
                                <!--:rules="[{ required: true, message: '请填写密码' }]"-->
                        <!--/>-->
                        <!--<div style="margin: 16px;">-->
                            <!--<van-button round block type="info" native-type="cancel">-->
                                <!--取消-->
                            <!--</van-button>-->
                            <!--<van-button round block type="info" native-type="submit">-->
                                <!--提交-->
                            <!--</van-button>-->
                        <!--</div>-->
                    <!--</van-form>-->
                <!--</div>-->
            <!--</van-overlay>-->

            <img class="usericon" @click="editInfo" src="../assets/1-12.png">

=======
            <img class="usericon" src="../assets/1-12.png">
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36

            <div class="userName">
                {{userName}}
            </div>
            <div class="userRole">
                [{{userRole}}]
            </div>
        </div>
        <div class="myrepaire">
            <div class="myrepaire-l"><i class="icon1" src="../assets/repaire.png"></i>我的报修单</div>
            <div class="myrepaire-r">查看全部报修单<img class="goicon" src="../assets/go.png"></div>
        </div>
        <div class="repaireStatus">
            <div class="repaireStatus-icon">
                <i class="iconfont icon-daishenhe icon2"></i>
            </div>
            <div class="repaireStatus-icon">
                <i class="iconfont icon-yishenhe icon2"></i>
            </div>
            <div class="repaireStatus-icon">
                <i class="iconfont icon-yunliankeji- icon2"></i>
            </div>
            <div class="repaireStatus-icon">
                <i class="iconfont icon-daipingjia icon2"></i>
            </div>
            <!--<div v-for="list in repaireStatusicons" :key="list">-->
                <!--&lt;!&ndash;<i :class="list.value"></i>&ndash;&gt;-->
                <!--&lt;!&ndash;<img src="{{imge}}">&ndash;&gt;-->
                <!--<div>-->
                    <!--{{list.name}}-->
                <!--</div>-->
            <!--</div>-->

        </div>
        <div class="repaireStatus-content">
            <div>待审核</div>
            <div>已审核</div>
            <div>已派单</div>
            <div>待评价</div>
        </div>
        <div class="myrepaire">
            <div class="myrepaire-l">
                <i class="icon1" src="../assets/myinfo.png"></i>个人信息
            </div>
        </div>

        <div class="loginOut">
            <button @click.prevent="loginOut">退出登录</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return{
                userName:JSON.parse(localStorage.getItem("login_data")).u_name,
                userRole:JSON.parse(localStorage.getItem("login_data")).ro_name,
                roId:JSON.parse(localStorage.getItem("login_data")).ro_id,
<<<<<<< HEAD
                ro_id:3,
                show:false,
                username: '',
                password: '',
=======
                ro_id:3
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
                // imge:"../assets/repaire.png",
                // repaireStatusicons:[
                //     {name:'待审核',value:"iconfont icon-daishenhe"},
                //     {name:'已审核',value:"iconfont icon-yishenhe"},
                //     {name:'已派单',value:"iconfont icon-yunliankeji-"},
                //     {name:'待评价',value:"iconfont icon-daipingjia"}
                // ]
            }
        },
        methods:{
            loginOut(){
                console.log("退出登录")
                axios.get("safty/user/exit")
                    .then((res) => {
                        console.log("loginout:"+res.data)
                        localStorage.removeItem("login_data");
                        window.sessionStorage.removeItem("LoginUser");
                        this.$router.push("/");
                    })
                    .catch((err) => {
                        console.log(err.data);
                    })
<<<<<<< HEAD
            },
            editInfo(){
                console.log("修改");
                this.show = true;
            },
            onSubmit(values) {
                console.log('submit', values);
            },
            cancel(){
                this.show = false;
=======
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
            }
        }
    }
</script>

<style scoped>
<<<<<<< HEAD

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        width: 120px;
        height: 120px;
        background-color: #fff;
    }
=======
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
    .mycontainer{
        display: flex;
        flex-direction: column;
        background-color: #F7F7F7;
        height: 600px;
    }

    .mylogo{
        /*background-color: #DDDDDD;*/
        margin-top: 10px;
        width: auto;
        height: 160px;
    }
    .usericon{
        padding-top: 10px;
        width: auto;
        height: 85px;
    }
    .userName{
        font-family: 华文新魏;
        font-weight: bold;
        color: #222222;

    }
    .userRole{
        padding-top: 5px;
        font-family: "Malgun Gothic";
        font-size: 18px;
        font-weight: bold;

    }
    .myrepaire{
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        font-family: "Malgun Gothic";
    }
    .myrepaire-l{
        display: flex;
        padding-left: 10px;
        margin-right: 10px;
    }
    .icon1{
        margin-right: 8px;
        width: 25px;
    }
    .myrepaire-r{

    }
    .goicon{
        width: 16px;
    }
    .repaireStatus{
        margin-top: 2px;
        /*border-top: 1px solid #666666;*/
        /*border-radius: 25px;*/
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding-left: 10px;
        padding-right: 10px;
        height: 60px;
    }
    .repaireStatus-icon{
        /*border-left: 1px solid #969896;*/
        /*border-right: 1px solid #969896;*/
        border-radius: 5px;
        width: 60px;
        height: 60px;
        /*background-color: #fff;*/
        line-height: 60px;

    }
    .repaireStatus-content{
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding-left: 19px;
        padding-right: 19px;
        font-family: "Malgun Gothic";
        font-size: 14px;
        padding-bottom: 10px;
    }
    .icon2{
        font-size: 33px;
    }
    .loginOut{
        background-color: #fff;
        display: flex;
        padding-top: 170px;
        padding-bottom: 20px;
    }
    .loginOut>button{
        width: 100%;
        height: 30px;
        border-radius: 6px;
        border: 1px solid #DDDDDD;
        color: #666666;
        letter-spacing: 2px;
    }

</style>